<template>
  <a-card :bodyStyle="{ padding: 0 }">
    <a-row class="p-15">
      <a-col :span="12"><span>项目管理</span></a-col>
      <a-col :span="12" class="text-right">
        <a-space :size="15">
          <a-button type="primary" @click="openForm()"> <PlusCircleOutlined />新建 </a-button>
          <a-button type="primary" @click="findList()"> <RedoOutlined />刷新 </a-button>
        </a-space>
      </a-col>
    </a-row>
    <div>
      <a-table :data-source="dataSource" :columns="columns" bordered :loading="loading" :rowKey="(record) => record.id" :pagination="false" size="small">
        <template #action="{ record }">
          <a-space>
            <a @click="openForm(record.id)" href="javascript:;"> 修改 </a>
            <a-divider type="vertical" />
            <a @click="deleteList(record.id)" href="javascript:;" class="text-danger"> 删除 </a>
          </a-space>
        </template>
      </a-table>
    </div>
  </a-card>
  <a-modal v-model:visible="form.visible" title="编辑" centered :width="800" :height="700" :footer="null" destroyOnClose>
    <info v-model:formKey="form.key" @onSaveSuccess="saveChange" />
  </a-modal>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { PlusCircleOutlined, RedoOutlined } from "@ant-design/icons-vue";
import info from "./info";
import service from "@/services/service";
import tools from "@/services/tools";
export default defineComponent({
  components: {
    PlusCircleOutlined,
    RedoOutlined,
    info,
  },
  name: "Project",
  /* 获取父组件传过来的值 */
  props: {},
  setup() {
    const state = reactive({
      loading: false,
      columns: [
        {
          title: "项目名称",
          dataIndex: "name",
          key: "Name",
        },
        {
          title: "项目描述",
          dataIndex: "remark",
          key: "Remark",
        },
        {
          title: "操作",
          key: "action",
          slots: {
            customRender: "action",
          },
          width: 200,
        },
      ],
      dataSource: [],
      form: {
        visible: false,
        key: null,
      },
    });
    const methods = {
      //获取列表数据
      findList() {
        state.loading = true;
        service
          .findList("Project")
          .finally(() => {
            state.loading = false;
          })
          .then((res) => {
            state.dataSource = res.data;
          });
      },
      //删除数据
      deleteList(id) {
        tools.confirm("确定删除", function () {
          service.deleteList("Project", id).then((res) => {
            if (res.code != 1) return;
            tools.message("删除成功!", "成功");
            methods.findList();
          });
        });
      },
      //打开表单页面
      openForm(value) {
        state.form.visible = true;
        state.form.key = value;
      },
      saveChange() {
        state.form.visible = false;
        methods.findList();
      },
    };
    onMounted(() => {
      methods.findList();
    });
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>
<style scoped>
.ant-table-striped :deep(.table-striped) {
  background-color: #fafafa;
}
.ant-spin-nested-loading {
  min-height: 600px;
}
</style>
